<template>
  <h2>当前求和为：{{ sum }}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>当前的信息为：{{ msg }}</h2>
  <button @click="msg+='！' ">修改信息</button>
  <hr>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>薪资：{{ person.job.j1.salary }}K</h2>
  <button @click="person.name+='~' ">修改姓名</button>
  <button @click="person.age++ ">修改年龄</button>
  <button @click="person.job.j1.salary++ ">涨薪</button>
  <hr>
</template>

<script>
import {ref, watch, watchEffect, reactive} from 'vue'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Demo',
  // watch:{
  //   // sum:function (newVal,oldVal){
  //   //   console.log(newVal,oldVal)
  //   // }
  //   sum:{
  //     immediate:true,
  //     deep:true,
  //     handler:function (newVal,oldVal){
  //
  //     }
  //   }
  // },


  setup: function () {
    let sum = ref(0)
    let msg = ref('你好')
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    // watch(sum,(newVal,oldVal)=>{
    //   console.log(newVal,oldVal)
    // },{immediate:true})
    watchEffect(() => {
      const x = sum.value
      console.log('watchEffect所以指定的回调执行了')
    })

    // },{
    //   flush:'post',
    //   onTrack:function (e){
    //     console.log(e)
    //   },
    //   onTrigger:function (e){
    //     console.log(e)
    //   }
    // })


    return {
      sum, msg, person

    }
  }
}
</script>


